<template>
    <div>
        <setHeader :title="headerTitle"></setHeader>
        <div class="pagecontent" style="background-color: #fff;">
            <div class="association_position">
                <div class="association_items" v-for="(biao, b) in tags" :key="b"   >
                    <label for="">{{biao.label_name}}</label>
                    <i :class="delIconName" class="deltreeicon" v-show="delIconShow" @click="delClick(biao.id)"></i>
                </div>
            </div>
            <!-- 添加职位 -->
            <div class="mycard_insert" @click="tagShow">
                <i class="iconfont icon-icon02"></i>添加标签
            </div>
        </div>
        <div class="dialog__wrap" v-show="stateShow">
            <transition name="background-fade" @after-leave="afterLeave">
              <div class="dialog__background" v-if="show"></div>
          </transition>
          <transition name="fade-move">
              <div class="dialog">
                  <div class="dialog__head">
                      <span class="dialog__head__title">
                          输入标签名称
                      </span>
                      <i class="iconfont icon-cuo dialog__head__btn" @click="close"></i>
                  </div>
                  <div class="dialog__body">
                      <span>
                          <input type="text" :placeholder="placeholder" class="message_level" v-model="conttent">
                      </span>
                  </div>
                  <div class="dialog__footer">
                      <button class="dialogbtnner" @click="cancel()" :disabled="pending">取消</button>
                      <button class="dialogbtnner" @click="dialogbtn()" :disabled="pending">完成</button>
                  </div>
              </div>
          </transition>
        </div>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
    export default {
        data() {
            return {
                headerTitle: '标签管理',
                tags:'',
                c_id:'',


                //弹出框控制
                stateShow:false,
                pending: false,
                conttent:'',
                placeholder: '请输入标签名称',
                show:false,

                delIconShow:true,
                delIconName: 'iconfont icon-shanjian',

                association: [
                    {
                        text: '会长'
                    },
                    {
                        text: '董事长'
                    }
                ],
            }
        },
        mounted () {
            this.c_id = this.$route.query.cp_id;
            this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
            this.access_token = window.localStorage.getItem('access_token');
            //获取当前也的标签
            this.getLabellist(this.c_id);
            this.$dragging.$on('dragged', ({ list }) => {
                // console.log(value.item)
            })
        },
        methods: {
            //获取标签列表
			getLabellist(c_id){
				let that = this;
				that.$fetch(that.$path + '/index.php/api/company/label/'+c_id).then((response) => {
					that.tags = response.data;
					console.log('获取标签列表',response);
				})
            },
            //点击添加标签显示弹出框
            tagShow(){
                console.log(56);
                this.show = true;
                this.stateShow = true;
                
            },
            // 关闭弹框
            afterLeave() {
            this.stateShow = false;
            },
            close() {
            this.show = false;
            },

            // 关闭弹框
            cancel() {
            this.show = false;
            },
            // 确定提交弹框内容
            dialogbtn() {
            let that = this;
            that.$post(that.$path + '/index.php/api/company/label',{c_id:this.c_id,label_name:this.conttent,access_token:this.access_token}).then((response) => {
                    console.log('添加标签',response);
                    if(response.code == 200){
                        this.stateShow = false;
                        this.show = false;
                        that.$openTips({
                            text: '添加成功',
                            time: 1000
                        })
                        this.getLabellist(this.c_id);
                    }
				})
            },

            //点击删除
            delClick(val){
                let that = this;
                that.$fetch(that.$path + '/index.php/api/company/deletelabel/'+val).then((response) => {
                console.log('删除标签',response);
                that.$openTips({
                        text: '删除成功',
                        time: 1000
                    })
                    this.getLabellist(this.c_id);
                })
            },
        },
        components: {
            setHeader
        }
    }
</script>

<style>

/* 协会职位渲染 */
.association_position .association_items {
    height: 1rem;
    line-height: 1rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    border-bottom: 1px solid #d8d8d8;
    padding: 0 0.2rem;
}
/* 添加职位 */
.mycard_insert {
    height: 1.5rem;
    width: 7rem;
    border: 1px dashed #d8d8d8;
    text-align: center;
    margin: 0.4rem auto;
    font-size: 0.4rem;
    line-height: 1.5rem;
    color: #999;
}
.mycard_insert .icon-icon02 {
    font-size: 0.48rem;
    vertical-align: middle;
    line-height: 1.5rem;
    display: inline-block;
    margin-right: 0.2rem;
}
/* 点击编辑出现的删除按钮 */
 .deltreeicon {
    height: 1rem;
    line-height: 1rem;
    margin-bottom: 0;
    color: #e50838;
    margin-top: -0.15rem;
    display: inline-block;
    font-size: 0.44rem;
    float: right;
}

</style>

<style lang="scss" scoped>
//添加同级和下级弹框
.dialog {
  width: 6rem;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: #fff;
  font-size: 0.32rem;
  z-index: 10;
  &__wrap {
  }
  &__background {
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  &__head {
    padding: 0.2rem 0.3rem;
    line-height: 1;
    &__title {
      line-height: 1;
      font-size: 0.28rem;
      color: #333;
    }
    &__btn {
      line-height: 1;
      float: right;
      font-size: 0.28rem;
      color: #999;
      // -webkit-text-stroke-width: 0.02rem;   //加粗字体图标
    }
  }
  &__body {
    padding: 0.1rem 0;
    color: #666;
    font-size: 0.28rem;
    white-space: normal;
    word-break: break-all;
    span {
      display: block;
      font-size: 0.24rem;
      color: #333;
      height: 0.66rem;
      line-height: 0.66rem;
      label {
        height: 0.66rem;
        line-height: 0.66rem;
        display: inline-block;
      }
      input {
          padding: 0 0.04rem;
          border: 0;
          outline: none;
          height: 0.66rem;
          line-height: 0.66rem;
          border-bottom: 1px solid #d8d8d8;
      }
    }
  }
  &__footer {
	font-size: 0;
  line-height: 1;
  padding: 0.2rem 0;
    .dialogbtnner {
		    font-size: .22rem;
        background-color: #e50838;
        border-top: 1px solid #e50838;
        width: 1rem;
        padding: .08rem 0;
        color: #fff;
        border-radius: 4px;
        margin: 0 0.1rem;
    }
    .dialogbtnner:first-child {
      background-color: #fff;
      color: #e50838;
      border: 1px solid #e50838;
    }
  }
}
.background-fade {
  &-enter {
    opacity: 0;
  }
  &-enter-active {
    transition: opacity 0.2s;
  }
  &-enter-top {
    opacity: 1;
  }
  &-leave {
    opacity: 1;
  }
  &-leave-active {
    transition: opacity 0.2s;
    opacity: 0;
  }
}
.fade-move {
  &-enter {
    opacity: 0.6;
    top: 45%;
  }
  &-enter-active {
    transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
  }
  &-enter-to {
    opacity: 1;
    top: 50%;
  }
  &-leave {
  }
  &-leave-active {
  }
  &-leave-to {
  }
}

</style>